​​​​​​​Project Information

To understand our users and their struggles with the tool, I audited the dashboards, analysed the support tickets and spoke with the Customer Success Managers. Additionally I analysed our Hotjar results.

Below you see a part of my user research. I needed to understand their journey to be able to create an improved dashboard with a great user experience. I asked everybody who was involved to teach me as much as possible about the users, the tool and their pain points. 

With this information I managed to create user journeys for the different cases and persona's.

Here I summarise the most important pain points to give you an idea of what was wrong. This is not the full list.

- The export button for the first chart is above the general filter panel.

- The horizontal scrollbar is positioned at the end of the data table, below the fold, this can cause excessive vertical scrolling.

- A pie chart is displayed so large that users need to scroll to see the second one or are not even aware that there is more to see.

- The colours and other style elements don't fit the brand style.

- Difficult jargon.

- Similar terms with different meanings.

- Ranges in filters are mathematically incorrect and seem to show overlap in data.

- We do not support the tool on mobile, but an unusable version, which seems to work, is displayed anyway.

- Missing dependencies between filters, causes much clutter in the design and much scrolling through items.

- Data in the tables differs from the data in the downloaded csv files.

​​​​​​​Below you see an overview of the different cases and the journeys of the users, blurry, to avoid sharing confidential insights, and the personas.

While using our dashboard partners encounter issues in their user experience, mostly because of improvident functionality.

All my findings, I translated to a long list of requirements. This list I categorised and prioritised from a UX perspective, using the MoSCoW method and logic. This version I revised together with the Product Lead and the developers to get a prioritised requirement list, which suited the wishes of all the stakeholders and contained items that were feasible in time and budget.

Going through several iterations we got an end result. While prototyping I started with sketches and went via low fidelity prototypes to high fidelity prototypes. The whole team agreed with this prototype, because communication throughout the process was key. I spoke with all the important stakeholders. Users, developers, product lead, commercial team and other experts. This communication plays an important role in my iterations. I discuss, produce prototypes, discuss, check for feasibility, prototype again, and so on, until we have a great end result.

- Could you show me the data for every Monday in Q1?

- Could you tell me for which groupings you can see data?

- Which filters do you usually use?

- Are certain terms unclear for you?

- What was the one thing you disliked the most about the dashboard?

- Do you have colleagues who visit the dashboard for different goals than you?

- What do you do before and after exporting the data?

- Can you prioritise the information which you are looking for?

The main structure of the reports I didn't need to touch. The different tabs were already in a good order, according to user research and commercial wishes.

The functionality of the tool was very wrong, so 95% of the tool needed to be redesigned. For the developers there were many new elements and interactions, so I created flows in which they could look up all the preferred behaviour. 

Our users have different permissions, so they don't see the same amount of charts. This would affect the main structure of the pages, so I created overviews to show how the pages would look for different permissions. It needed to be intuitive, easy to interpret and visually attractive.

Users don't understand the range filters well. According to the filter the ranges overlap, but that is not really the case. So we changed 1 - 100, 100 - 200 into 0 < P ≤ 100, 100 < P ≤ 200.

For easy findability, recognition and short distances, I categorised the filters and reordered them. 

I changed the position of a few filters from the general filters to the panel they apply to. It is much more intuitive now, since these filters only apply on one chart.

For faster interpretation and more inclusive design (visual and textual learners), I added icons and text to certain columns.

In the former version the first few items of a selection were shown in the filter. If 100 items were selected, the user would only see three in a single glance. It also wouldn't be great to show all selected items underneath the filters, the filters would jump to other places and the filter panel would be cluttered. So I decided to show all selected items in the top of the filter dropdown menu. In a single glance the user can see how many items are selected and after 1 click the user will see which items are selected. With this improvement I could also set a fixed filter size, jumping filters belong to the past for sure now.

The colours in the dashboard didn't fit the brand style. For more reliability I fitted the colours and the rest of the style to the brand style.

Instead of having a horizontal scrollbar at the end of the table, I inserted the scrollbar above the fold to avoid endless vertical scrolling through our big amounts of data.

I changed the chart sizes, so that more would fit above the fold and to give the user a hint that there is more to see below the fold.

Since I document a lot and keep lists up to date, I could use my requirement list which I started at the beginning of this project to create a test plan. 

The list evolved from requirements, via component list to test plan. 

 An example:

Requirement: The user must be able to see the market share.

Components: We need a pie chart and a legend.

Test plan: Specifications of the pie chart and legend layout and interactions. The exact specifications I wrote for every element in a mastersheet.

The test plan I used to let other people test the high fidelity prototypes and in a later stadium to test the results of the work of the developers, we used XRay for Jira.

During the project I created a test plan in XRay for Jira to test the layout and functionality of the interface. In the meantime my role got smaller as the developers built towards an end product and I only got consulted about small new issues that they encountered, if it was preferred to make changes in the design instead of the back-end.

The company chose for a complete rebranding. For this process an external company was hired. They created our commercial website and the offline brand style. For our platform it was my task to do the rebranding. I will add another project in this portfolio to explain that process, but here you can see a quick overview of the new brand style in our tools.

Since we are working with data, the commercial brand style was drawing way too much attention to certain components, because it is about CTA's instead of showing data in a fair way. I enhanced the brand style with this style for our data tools. It is fitting the main style very well, draws less attention and is more accessible. For example the pure black and pure white I replaced with alternative whites and black to prevent eye strain for our heavy users.

Thanks for showing interest in my project, I hope that you enjoyed and that you have a good understanding of my way of working.

Other projects for my portfolio are still in progress, soon you'll read here about an internal platform that our Product Team built and about the Design System that I built from scratch.